<template>
  <div>
    <van-tabbar :route="true"
    inactive-color="#666"
    active-color="caderblue">
      <van-tabbar-item replace to="/home">
        <span>首页</span>
        <template #icon="props">
          <van-icon class="iconfont"
           class-prefix="icon" name="shouye"
           size="28">
          </van-icon>
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/cates">
      <span>分类</span>
      <template #icon="props">
        <van-icon class="iconfont"
         class-prefix="icon" name="fenlei1"
         size="28">
        </van-icon>
      </template>
      </van-tabbar-item>

       <!-- 购物车右上角显示商品件数 -->
      <van-tabbar-item replace to="/cart">
      <span>购物车</span>
      <template #icon="props">
        <van-icon class="iconfont"
         class-prefix="icon" name="gouwuche"
         size="28">
        </van-icon>
      </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/mine">
      <span>我的</span>
      <template #icon="props">
        <van-icon class="iconfont"
         class-prefix="icon" name="wodedangxuan"
         size="28">
        </van-icon>
      </template>
      </van-tabbar-item>
  </van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

}
</script>

<style lang="scss" scoped>

</style>